<template>
  <view class="lt-loading-mask" v-if="show" @touchmove.stop.prevent>
    
    <view class="bg-deco">
      <view class="grid-line"></view>
      <text class="bg-text">LOADING</text>
    </view>

    <view class="loader-content">
      <view class="spinner-box">
        <view class="ring outer"></view>
        <view class="ring inner"></view>
        <view class="core"></view>
      </view>

      <view class="text-group">
        <text class="title">SYSTEM INITIALIZING</text>
        <text class="subtitle">ESTABLISHING CONNECTION // {{ percent }}%</text>
      </view>

      <view class="progress-bar">
        <view class="progress-fill" :style="{ width: percent + '%' }"></view>
      </view>
    </view>

    <view class="footer-info">
      <text>RHODES ISLAND</text>
      <text>NEURAL NETWORK</text>
    </view>

  </view>
</template>

<script>
export default {
  name: "LoneTrailLoading",
  props: {
    // 控制显示/隐藏
    show: {
      type: Boolean,
      default: false
    },
    // 是否自动演示进度 (如果不自动，可以通过 ref 修改 percent)
    autoRun: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      percent: 0,
      timer: null
    };
  },
  watch: {
    show(val) {
      if (val && this.autoRun) {
        this.startSimulate();
      } else {
        this.reset();
      }
    }
  },
  methods: {
    // 模拟加载进度
    startSimulate() {
      this.percent = 0;
      clearInterval(this.timer);
      
      this.timer = setInterval(() => {
        // 随机增加进度，模拟真实网络波动
        let increment = Math.floor(Math.random() * 5) + 1;
        this.percent += increment;
        
        if (this.percent >= 100) {
          this.percent = 100;
          clearInterval(this.timer);
          // 加载完成后，延迟一小会儿通知父组件
          setTimeout(() => {
            this.$emit('finished');
          }, 200);
        }
      }, 50);
    },
    reset() {
      this.percent = 0;
      clearInterval(this.timer);
    }
  }
}
</script>

<style lang="scss" scoped>
/* === 孤星配色 === */
$lt-bg: #E0E2E5;
$lt-text: #1a1a1a;
$lt-sub: #666;
$c-green: #79BBA9;

.lt-loading-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: $lt-bg;
  z-index: 9999; /* 确保层级最高 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 背景装饰 */
.bg-deco {
  position: absolute; width: 100%; height: 100%; top: 0; left: 0;
  pointer-events: none; overflow: hidden;
}
.bg-text {
  position: absolute; right: -40rpx; bottom: 100rpx;
  font-size: 160rpx; font-weight: 900; color: rgba(0,0,0,0.03);
  transform: rotate(-90deg); font-family: sans-serif;
}
.grid-line {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 60rpx 60rpx;
}

/* 中间内容 */
.loader-content {
  width: 80%;
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 10;
}

/* 旋转动画区 */
.spinner-box {
  width: 160rpx; height: 160rpx;
  position: relative;
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 60rpx;
}

.ring {
  position: absolute; border-radius: 50%;
}

/* 外环 */
.outer {
  width: 100%; height: 100%;
  border: 4rpx dashed $lt-text;
  opacity: 0.3;
  animation: spin 10s linear infinite;
}

/* 内环 */
.inner {
  width: 70%; height: 70%;
  border: 6rpx solid $c-green;
  border-left-color: transparent; /* 开口环 */
  border-right-color: transparent;
  animation: spin-rev 1.5s linear infinite;
}

/* 核心点 */
.core {
  width: 20rpx; height: 20rpx;
  background: $c-green;
  border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;
  box-shadow: 0 0 20rpx $c-green;
}

/* 文字 */
.text-group {
  text-align: center; margin-bottom: 30rpx;
  display: flex; flex-direction: column;
}
.title {
  font-size: 32rpx; font-weight: 900; letter-spacing: 4rpx; color: $lt-text;
  margin-bottom: 10rpx;
}
.subtitle {
  font-size: 20rpx; color: $lt-sub; font-family: monospace; letter-spacing: 2rpx;
}

/* 进度条 */
.progress-bar {
  width: 100%; height: 12rpx;
  background: rgba(0,0,0,0.05);
  transform: skewX(-20deg); /* 战术倾斜 */
  overflow: hidden;
}
.progress-fill {
  height: 100%; background: $c-green;
  transition: width 0.1s linear;
  box-shadow: 0 0 10rpx rgba(121, 187, 169, 0.5);
}

/* 底部 */
.footer-info {
  position: absolute; bottom: 60rpx;
  display: flex; justify-content: space-between; width: 80%;
  font-size: 20rpx; color: rgba(0,0,0,0.2); font-weight: bold; letter-spacing: 2rpx;
}

/* 动画定义 */
@keyframes spin { 
  from { transform: rotate(0deg); } to { transform: rotate(360deg); } 
}
@keyframes spin-rev { 
  from { transform: rotate(360deg); } to { transform: rotate(0deg); } 
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
</style>